<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <script th:src="@{/js/vue.js}"></script>
    <script th:src="@{/js/axios.js}"></script>
    <link rel="stylesheet" th:href="@{/js/el/theme-chalk/index.css}">
    <script th:src="@{/js/el/index.js}"></script>
</head>
<body>
<div id="app" >
    <el-container style="height:1000px;" >
        <el-header style="height:7%;padding: 0px;">
            <div th:include="~{common/head-adm::headAdm}">

            </div>
        </el-header>
        <el-container>
            <el-aside style="height: 100%;">
                <el-col :span="24" style="height: 100%;">
                    <el-menu
                            default-active="2"
                            class="el-menu-vertical-demo"
                            style="height:100%">
                        <el-menu-item index="0" @click="findMyBlogs()">
                            <i class="el-icon-setting"></i>
                            <span slot="title">专栏</span>
                        </el-menu-item>
                    </el-menu>
                </el-col>
            </el-aside>
            <el-main>
                <div style="width:100%;height:90%;">
                    <div style="width:100%;height:5%;">
                        <el-select v-model="typeValue" placeholder="请选择" style="width:20%;">
                            <el-option v-for="item in types" :key="item.id" :label="item.name"
                                       :value="item.id">
                            </el-option>
                        </el-select>
                        <el-button @click="findByTypeid()">查找</el-button>
                    </div>
                    <div style="width: 100%;height:95%">
                        <div v-for="(item,idx) in myBlogs" style="width:100%;height:auto;">
                            <div style="width:100%;height:95%;border: 1px solid black;">
                                <div id="title" style="height:10%;width:100%;border: solid 1px royalblue">
                                    {{item.title}}
                                </div>
                                <div style="width: 100%;height:80%;">
                                    <div style="width:100%;height:50%;">
                                        <p>
                                            &nbsp;&nbsp;&nbsp;&nbsp;
                                            摘要:
                                        <div  style="white-space: nowrap;overflow:hidden;
                                            text-overflow:ellipsis;" v-html="item.text">
                                        </div>
                                        </p>
                                    </div>
                                    <div style="text-align: right;height:20%">
                                        <div style="display:flex;justify-content: space-between">
                                            <div>
                                                <el-button @click="update()">修改</el-button>
                                                <el-button @click="del(item.id)">删除</el-button>
                                            </div>
                                            <a href="#" @click="findBlog(item.id)">阅读全文</a>
                                        </div>
                                        <br>
                                        <span>
                                            {{item.date}}
                                            &nbsp;&nbsp;
                                            作者:
                                            <a href="#">
                                                <span>{{item.author}}</span>
                                            </a>
                                            &nbsp;&nbsp;
                                            阅读数:
                                            [?]
                                            &nbsp;&nbsp;
                                            点赞数:
                                            {{item.hits}}
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <br/>
                        </div>

                    </div>
                </div>
            </el-main>
        </el-container>
    </el-container>


</div>
</body>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                myBlogs:{},
                types:{},
                typeValue:""
            }
        },
        methods:{
            goIndex(){
                window.location.href="/api/public/goIndex"
            },
            userClick(item){
                if(item == "my"){
                    window.location.href="/api/user/goUserInfo"
                }
                if(item == "addBlog"){
                    window.location.href="/api/blogs/goAdd"
                }
                if(item == "loginOut"){
                    axios.get("/logout").then(
                        function (resp) {
                            window.location.href=resp.data.action
                        }
                    )
                }
            },
            addBlog(){
                // console.log(".......")
                window.location.href="/api/blogs/goAdd"
            },
            findMyBlogs(){
                var that = this
                axios.get("/api/blogs/findByUid").then(
                    function (resp) {
                        // console.log(resp.data)
                        that.myBlogs = resp.data.data
                    }
                )
            },
            del(item){
                // console.log(item)
                var that =this
                axios.get("/api/blogs/delById/"+item).then(
                    function (resp) {
                        // console.log(resp.data)
                        that.myBlogs = resp.data.data
                    }
                )
            },
            update(){

            },
            findByTypeid(){
                var that =this
                axios.get("/api/blogs/findByTypeIdAndUid/"+this.typeValue).then(
                    function (resp) {
                        that.myBlogs = resp.data.data
                    }
                )
            },
            findBlog(id){
                sessionStorage.setItem("blogid",id);
                window.location.href="/api/public/goFindBlog"
            }
        },
        mounted(){
            var that = this
            axios.get("/api/type/findAll").then(
                function (resp) {
                    that.types = resp.data.data
                }
            )
        }
    })
</script>
</html>